import { useLocation } from 'react-router-dom'
import { ResultPage, Card, List, Button } from 'antd-mobile'
import MyNavBar from '../../components/navbar/index'
import styles from './css/orderPay.module.css'

function OrderPay() {
  const location = useLocation()
  console.log(location.state)
  const orderInfo = location.state

  const gotoPay = () => {
    let url = `https://api-ticket.liulongbin.top/order/pay?orderNo=${orderInfo.order_no}&amount=${orderInfo.order_info.total}`
    window.open(url, '_self')
  }

  return (
    <div className={styles.box}>
      <ResultPage
        status=""
        title={<MyNavBar title="订单详情" />}
        description=""
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <h1>搭配 ResultPage.Card 使用</h1>
          <h1>搭配 ResultPage.Card 使用</h1>
          <h1>搭配 ResultPage.Card 使用</h1>
          <h1>搭配 ResultPage.Card 使用</h1>
          <h1>搭配 ResultPage.Card 使用</h1>
          <h1>搭配 ResultPage.Card 使用</h1>
          <h1>搭配 ResultPage.Card 使用</h1>
        </ResultPage.Card>

        <Card style={{ marginTop: 12 }}>
          <List style={{ '--border-top': 'none', '--border-bottom': 'none' }}>
            <List.Item>
              <div className={styles.row1}>
                <span className={styles.title}>订单编号</span>
                <span className={styles.info}>{orderInfo.order_no}</span>
              </div>
            </List.Item>
            <List.Item>
              <div className={styles.row1}>
                <span className={styles.title}>单价</span>
                <span className={styles.info}>
                  ￥{orderInfo.order_info.price} x{orderInfo.order_info.count}张
                </span>
              </div>
            </List.Item>
            <List.Item>
              <div className={styles.row1}>
                <span className={styles.title}>总价</span>
                <span className={styles.total}>
                  ￥{orderInfo.order_info.total}
                </span>
              </div>
            </List.Item>
          </List>
        </Card>

        {orderInfo.order_state === 0 && (
          <div className={styles.btn}>
            <Button
              block
              color="warning"
              shape="rounded"
              onClick={gotoPay}
            >
              去支付
            </Button>
          </div>
        )}
      </ResultPage>
    </div>
  )
}

export default OrderPay
